
<mat-card class="h-100">
  <mat-card-content class="h-100 p-0 d-flex flex-column">

    <div class="row info-panel">
      <div class="col-lg-7 col-md-8 col-sm-6 col-12">

        <!-- Left hand section display bullet list and links to components -->
        <div class="d-flex justify-content-between">

          <h2 class="mb-0">Welcome, we are happy to see you 🎉</h2>

          <button
            mat-button
            class="mat-caption text-muted"
            (click)="hidePanel()">
            Dismiss
          </button>

        </div>

        <ol class="ps-3">
          <li class="pb-1">
            Connect to your existing database or create a new database
            <a class="text-primary btn-link pointer" routerLink="/databases">here</a>
          </li>
          <li class="pb-1">
            Edit your database
            <a class="text-primary btn-link pointer" routerLink="/sql-studio">here</a>
          </li>
          <li class="pb-1">
            Create your API
            <a class="text-primary btn-link pointer" routerLink="/endpoint-generator">here</a>
          </li>
          <li class="pb-1">
            Edit your code
            <a class="text-primary btn-link pointer" routerLink="/hyper-ide">here</a>
          </li>
          <li class="pb-1">
            Install plugins
            <a class="text-primary btn-link pointer" routerLink="/plugins">here</a>
          </li>
          <li class="pb-1">
            Get started with Machine Learning
            <a class="text-primary btn-link pointer" routerLink="/machine-learning">here</a>
          </li>
          <li class="pb-1">
            Create a chatbot
            <a class="text-primary btn-link pointer" routerLink="/chatbot-wizard">here</a>
          </li>
        </ol>

      </div>

      <!-- Right hand section displaying getting started YouTube video -->
      <div class="col-lg-5 col-md-4 col-sm-6 col-12">
        <div class="video-wrapper">

          <iframe
            width="560"
            height="315"
            src="https://www.youtube.com/embed/videoseries?si=AgtBPpTcUWZtCV1d&amp;list=PL_iESc2yi8IUCwO1TDft2oAfrUvJHuzU9"
            title="YouTube video player"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowfullscreen></iframe>

        </div>
      </div>
    </div>

  </mat-card-content>
</mat-card>
